<template>
  <div class="personal">
    <el-row type="flex" align="middle" class="content" v-show="true">
      <el-col>
        <span>未查询到身份证的客户信息，请手动录入</span>
      </el-col>
    </el-row>
    <el-form :model="personal" ref="personal">
      <!-- 基本信息 -->
      <el-row class="pt_20">
        <el-row type="flex" align="middel" class="info_title">
          <el-col>
            <span>基本信息（个人客户）</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item prop="name">
              <el-input v-model="personal.name" placeholder="请输入姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item prop="nation">
              <el-select v-model="personal.nation" placeholder="请选择民族">
                <el-option label="汉族" value="01"></el-option>
                <el-option label="满族" value="02"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item>
              <el-input v-model="personal.id_no" :readonly="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item prop="cert_start">
              <el-col :span="8" class="begin_date">
                <el-date-picker
                  type="date"
                  placeholder="开始日期"
                  v-model="personal.cert_start"
                  :clearable="false"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="8" class="end_date">
                <el-date-picker
                  type="date"
                  placeholder="结束时间"
                  v-model="personal.cert_end"
                  :clearable="false"
                ></el-date-picker>
              </el-col>
              <el-col :span="4" :offset="2" style="float: right;">
                <el-checkbox v-model="personal.long_checked">长期</el-checkbox>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <!-- 送达地址 -->
      <el-row class="pt_20">
        <el-row type="flex" align="middel" class="info_title">
          <el-col>
            <span>送达地址</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item prop="province_city_area">
              <el-cascader
                v-model="personal.province_city_area"
                :options="province_city_area"
                change-on-select
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="address">
              <el-input v-model="personal.address" placeholder="请输入详细地址"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <!-- 配偶信息 -->
      <el-row class="pt_20">
        <el-row type="flex" align="middel" class="info_title">
          <el-col>
            <span>配偶信息</span>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle">
          <el-col :span="11">
            <el-form-item style="height: 46px;" prop="marital_status">
              <div class="ui_radio">
                <label for="married">
                  <input v-model="personal.marital_status" value="02" type="radio" id="married">
                  <span>已婚</span>
                </label>
              </div>
              <div class="ui_radio">
                <label for="not_married">
                  <input v-model="personal.marital_status" value="01" type="radio" id="not_married">
                  <span>未婚</span>
                </label>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item>
              <el-input v-model="personal.spouse_name" placeholder="请输入配偶姓名"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item>
              <el-input v-model="personal.spouse_no" placeholder="请输入配偶证件号码"/>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item>
              <el-input v-model="personal.spouse_mobile" placeholder="请输入配偶手机号码"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <el-row type="flex" justify="end" align="middle" class="pt_20">
        <el-col :span="4">
          <el-button class="ui_button" @click.prevent="gonext">下一步</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      personal: {
        name: '', // 姓名
        id_no: this.$route.params.custno, // 证件号码
        id_type: '', // 证件类型
        naiton: '', // 民族
        cert_start: '', // 证件有效期起始日期
        cert_end: '', // 证件有效期截止日期
        long_checked: '', // 是否长期
        province_city_area: [], // 省份,城市,区县
        address: '', // 详细地址
        marital_status: '', // 婚姻状况
        spouse_name: '', // 配偶姓名
        spouse_no: '', // 配偶证件号码
        spouse_mobile: '' // 配偶手机号
      }
    }
  },
  created () {

  },
  computed: {
    ...mapState({
      province_city_area: state => state.applystore.province_city_area
    })
  },
  mounted () {
    console.log(this.$store.applystore.personal)
    this.personal = this.$store.applystore.personal
  },
  methods: {
    ...mapActions('applystore', ['updatePersonal', 'updateCustInfoApply']),
    gonext () {
      this.updatePersonal(this.personal)
      this.updateCustInfoApply(true)
      this.$router.push({ path: '/apply/assets' })
    }
  }
}
</script>
<style lang="scss">
.personal {
  height: auto;
  padding-bottom: 10%;
  .content {
    line-height: 20px;
    font-size: 16px;
    background: #fdefee;
    color: #ef5d5d;
    margin: 10px 0;
    .el-col {
      padding: 8px;
    }
  }
  .pt_20 {
    padding-top: 20px;
  }
  .info_title {
    font-size: 20px;
    color: #282830;
    padding: 20px 0;
  }
  .ui_radio {
    width: 50%;
    display: inline-block;
    font-size: 16px !important;
    input {
      display: inline-block;
      width: 20px;
      height: 20px;
      position: relative;
      overflow: visible;
      border: 0;
      background: none;
      -webkit-appearance: none;
      outline: none;
      margin-right: 15px;
      vertical-align: middle;
    }
    input:before {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      border: 1px solid #dfe0e1;
      border-radius: 13px;
      background-clip: padding-box;
      position: absolute;
      left: 0px;
      top: -3px;
    }
    input:checked:after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      background-image: url(../../assets/img/main/radio_checked.png);
      background-repeat: no-repeat;
      background-size: 20px;
      border-radius: 13px;
      position: absolute;
      left: 1px;
      top: -2px;
    }
  }
  .el-select,
  .el-cascader {
    width: 100%;
  }
  .el-cascader {
    font-size: 16px;
  }
  .ui_button {
    width: 180px;
    color: #ffffff !important;
    background: #ef5d5d !important;
  }
}
</style>
